<template>
    <u-index-list :index-list="letterList">
        <view class="top-box" @click="topCityClick">
            <u-icon name="map"></u-icon>
            <text class="top-l">当前定位：</text>
            <text>{{ cityModel.cityName }}</text>
        </view>
        <template>
            <u-index-item v-for="(item, index) in itemArr" :key="index">
                <u-index-anchor :text="letterList[index]"></u-index-anchor>
                <view class="lis" v-for="(cell, i) in item" :key="i" @click="cityClick(cell)">
                    {{ cell.cityName }}
                </view>
            </u-index-item>
        </template>
    </u-index-list>
</template>

<script>
import service from './service.js';
export default {
    data() {
        return {
            letterList: service.getCityLetters(),
            itemArr: [],
            cityModel: {},
        };
    },
    onLoad() {
        this.init();
    },
    methods: {
        // 初始化
        async init() {
            this.cityModel = getApp().globalData.subcontracting_movie.selectCity;
            this.citys = await service.getCitys();
            this.getCitysList();
        },
        getCitysList() {
            let arr = [];
            this.letterList.forEach(item => {
                arr.push([]);
            });

            this.citys.forEach(item => {
                let index = this.letterList.indexOf(item.firstLetter.toUpperCase());
                if (index > -1) {
                    arr[index].push(item);
                }
            });
            this.itemArr = arr;
        },
        // 点击当前定位
        async topCityClick() {
            uni.navigateBack();
        },
        async cityClick(e) {
            getApp().globalData.subcontracting_movie.$utils.setCurrentCity(e);
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.top-box {
    @include flexCenter;
    padding: 20rpx 30rpx;
    @include font(30rpx, #666);

    &-l {
        margin-left: 15rpx;
    }
}
.lis {
    padding: 20rpx 30rpx;
    @include font(28rpx, #323233);
}
</style>
